<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    const app = Vue.createApp({
        data(){
            return{
                say:"活得数据参数", //在这里 动态传递参数 可多种类型的  
                posts: [
                        { id: 1, title: '1111111111111111111' },
                        { id: 2, title: '2222222222222222222' },
                        { id: 3, title: '3333333333333333333' }
                ]
            }
        },
                    //  1 在调用子组件的地方，通过属性name传递一个文字进去。
        template:`<p> 东东 </p>
                <Son  name ="这是传递的数据" :say="say"/>    
                
                <blog-post
                        v-for="post in posts"
                        :key="post.id"
                        :title="post.title"
                ></blog-post>
                `
    })

    //声明全局组件 son
    app.component("Son", {
                   //2 传递后用props在子组件中进行接受，然后用插值表达式（双花括号{{name}}）的形式进行打印出来。
                   //静态参数坑  静态传递的只能是字符串类型String，而动态传参的就可以是多种类型了，甚至是一个函数(方法).
        props:["name","say"],
        // props:["say"],         
        template:`<div> son骨架 --{{name}}--{{say}} </div>`
    })

    app.component('blog-post', {
        props: ['title'],
        template: `<h4>{{ title }}</h4>`
    })





    const vm = app.mount("#app")
    /*父组件向子组件传值(静态传值)
        子组件中的<Son />是写死的 想动态的从父组件传递 可以使用属性的方式 然后子组件用props接受 
    */

    //静态传参，传递的内容是数字123,但在模板中使用typeof查看属性时，仍然是字符串（String）。 改为动态传参，就变成了数字类型。

</script>